<template>
  <div class="content">
    <div class="title">专项练习</div>
    <div class="flex marT20 w-size">
      <div v-for="(item, index) in specialType" :key="index"
        class="flex flex-column flex-align-center special-item cursor_pointer" @click="toMnks(item.questionType)">
        <img :src="item.img" alt="" class="pic" />
        <div class="marT10 font25">{{ item.questionTypeName }}</div>
        <div class="marT10 font20">
          {{ item.typeCount }}题
        </div>
      </div>
    </div>
    <div class="title marT50">按已做未做</div>
    <div class="marT30 flex flex-align-center w-size grid-container">
      <div class="already flex flex-align-center flex-justify-between cursor_pointer" @click="toDoNotDone('01')">
        <div class="flex flex-align-center">
          <div class="card-icon">
            <img src="@/assets/img/specialIcon.png" alt="">
          </div>
          <div class="tips">已做题</div>
        </div>
        <div class="flex flex-align-center flex-justify-center">
          <div class="num">{{ statisticsData.answeredQuestionCount }}题</div>
          <el-icon color="#fff" size="1.5625rem">
            <ArrowRight />
          </el-icon>
        </div>
      </div>
      <div class="already flex flex-align-center flex-justify-between cursor_pointer" @click="toDoNotDone('02')">
        <div class="flex flex-align-center">
          <div class="card-icon">
            <img src="@/assets/img/specialIcon.png" alt="">
          </div>
          <div class="tips">未做题</div>
        </div>
        <div class="flex flex-align-center flex-justify-center">
          <div class="num">{{ statisticsData.totalQuestionCount - statisticsData.answeredQuestionCount }}题</div>
          <el-icon color="#fff" size="1.5625rem">
            <ArrowRight />
          </el-icon>
        </div>
      </div>
    </div>
    <div class="title marT50">按知识点类型</div>
    <div v-for="(ele, index) in knowledgeType" :key="index" class="content-item">
      <div v-if="ele.subhead !== 'null'" class="subtitle">
        {{ ele.subhead }}
      </div>
      <div class="marT30 flex flex-wrap w-size grid-container">
        <div class="already flex flex-align-center flex-justify-between cursor_pointer"
          v-for="(item, index) in ele.children" :key="index" @click="toPractice(item)">
          <div class="flex flex-align-center">
            <div class="card-icon">
              <img src="@/assets/img/specialIcon.png" alt="">
            </div>
            <div class="tips">{{ item.name }}</div>
          </div>
          <div class="flex flex-align-center">
            <div class="num">{{ item.questionCount }}题</div>
            <el-icon color="#fff" size="1.5625rem">
              <ArrowRight />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import xgst from '@/assets/img/gp.png'
import yc from '@/assets/img/yc.png'
import cc from '@/assets/img/cc.png'
import { ArrowRight } from '@element-plus/icons-vue'
import { getQuestionInfo, statDataToType, getProgressToCarMode } from '@/api/userApi'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/user'
const userStore = useUserStore()

const router = useRouter()
const specialType = ref<any>([])
const knowledgeType = ref<any>([])

function toMnks(questionType: number) {
  router.push({ name: 'specialExam', query: { questionType, status: 1 } })
}
function toDoNotDone(e: string) {
  console.log(e, "e===");

  router.push({ name: 'specialExam', query: { isAnswer: e, status: 2 } })
}

const fetchQuestionInfo = async () => {
  try {
    const res = await getQuestionInfo({
      categoryIds: userStore.categoryId,
      carIds: userStore.storeInfo.carModelId,
      pageUrlType: '05',
      pageSize: 100,
      pageNum: 1,
      status: 1
    })
    if (res.code === '00000') {
      const children = res.data.list[0].children || []
      const grouped: Record<string, any[]> = {}
      children.forEach((item: any) => {
        const key = item.subhead
        if (!grouped[key]) {
          grouped[key] = []
        }
        grouped[key].push(item)
      })
      const arr = Object.keys(grouped).map(subhead => ({
        subhead,
        children: grouped[subhead]
      }))
      // 转为数组，每组为一个对象，包含subhead和children
      knowledgeType.value = [
        ...arr.filter(item => item.subhead === '' || item.subhead === null),
        ...arr.filter(item => item.subhead !== '' && item.subhead !== null)
      ]
      console.log(knowledgeType.value, "knowledgeType.value===");
    } else {
      // console.error('获取题目信息失败:', res.message)
    }
  } catch (error) {
    console.error('请求错误:', error)
  }
}

const toPractice = (item: any) => {
  if (item.questionCount > 0) {
    console.log(item, 'item==')

    router.push({ name: 'specialExam', query: { id: item.id } })
  } else {
    ElMessage.warning('该分组暂无题库')
  }
}

const getTypeNum = async () => {
  const res = await statDataToType({
    carIds: 1,
    categoryIds: userStore.categoryId,
    type: 0
  })
  if (res.code === '00000') {
    specialType.value = res.data
      .filter((item: any) => [2, 1, 5].includes(item.questionType))
      .map((item: any) => {
        // 分别加上图片
        let img = ''
        if (item.questionType === 2) {
          img = xgst // 选择题
        } else if (item.questionType === 1) {
          img = yc // 判断题
        } else if (item.questionType === 5) {
          img = cc // 多选题
        }
        return { ...item, img }
      })
  }
}

const statisticsData = ref<any>({})
const getQuestionData = async () => {
  try {
    const res = await getProgressToCarMode({
      id: userStore.storeInfo.memberId,
      carModelId: userStore.storeInfo.carModelId,
      categoryId: userStore.categoryId,
    })
    if (res.code === '00000') {
      statisticsData.value = res.data.find((e: any) => e.categoryId === userStore.categoryId)
      console.log(statisticsData.value, "statisticsData.value===");
      userStore.setStatisticsData(statisticsData.value)
    }
  } catch {
  } finally {
  }
}

onMounted(() => {
  getQuestionData()
  fetchQuestionInfo()
  getTypeNum()
})
</script>
<style scoped lang="scss">
@use 'sass:math';

@function rem($px) {
  @return math.div($px, 16) * 1rem;
}

.content {
  padding: rem(30);
  background-color: #fff;
  height: 100%;
}

.content-item {
  margin-bottom: rem(30);
}

.title {
  font-size: rem(30);
  font-weight: 500;
  margin-bottom: rem(10);
}

.subtitle {
  font-size: rem(25);
  font-weight: 500;
  color: #333;
  margin-top: rem(20);
  margin-bottom: rem(20);
}

.pic {
  width: rem(50);
  height: rem(50);
}

.special-item {
  width: rem(150);
  margin-right: rem(50);
  transition: all 0.3s ease;
  /* 添加过渡效果 */
  border-radius: rem(8);
  padding: rem(20) 0;

  &:hover {
    transform: translateY(rem(-10));
    /* 上移10像素 */
    box-shadow: 0 rem(10) rem(20) #eefbf0;
    /* 悬停时更明显的阴影 */
  }
}

.already {
  // height: rem(100);
  // width: rem(300);
  padding: rem(27) rem(40) rem(27) rem(20);
  box-shadow:
    0 rem(4) rem(8) rgba(0, 0, 0, 0.1),
    0 rem(-4) rem(8) rgba(0, 0, 0, 0.1),
    rem(-4) 0 rem(8) rgba(0, 0, 0, 0.1),
    rem(4) 0 rem(8) rgba(0, 0, 0, 0.1);
  border-radius: rem(16);
  // margin-bottom: rem(35);
  transition: all 0.3s ease;
  background: url('@/assets/img/special.png') no-repeat;
  background-position: center;
  background-size: cover;
  cursor: pointer;

  /* 添加过渡效果 */
  &:hover {
    transform: translateY(rem(-10));
    /* 上移10像素 */
    box-shadow: 0 rem(10) rem(20) #eefbf0;
    /* 悬停时更明显的阴影 */
  }
}

.already-round,
.degree-round,
.knowledge-round {
  width: rem(30);
  height: rem(30);
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: rem(30);
  font-size: rem(20);
}

.already-round {
  background-color: #0995ff;
}

.degree-round {
  background-color: #00b365;
}

.knowledge-round {
  background-color: #7f8afd;
}

.tips {
  color: #fff;
  font-weight: 700;
  font-size: rem(25);
}

.num {
  color: #fff;
  font-weight: 500;
  font-size: rem(25);
}

// .w-size {
//   width: 80%;
// }

.font25 {
  font-size: rem(25);
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  flex-wrap: wrap;
  gap: rem(40);
  width: 100%;
}

.card-icon {
  width: rem(50);
  height: rem(50);
  background-color: #fff;
  border-radius: 50%;
  margin-right: rem(15);
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: rem(40);
    height: rem(40);
  }
}

.font20 {
  font-size: rem(20);
  color: #999;
}
</style>
